<template>
	<view class="section-card">
		<view class="section-header">
			<roc-icon-plus name="list" :size="20" color="#ffffff" class="item-icon"></roc-icon-plus>
			<text class="section-title">{{title}}</text>
		</view>
		<view class="grid-container">
			<view v-for="(item, index) in items" :key="index" class="grid-item" @click="handleClick(index)">
				<roc-icon-plus :name="item.icon" :size="30" color="#674cff" class="item-icon"></roc-icon-plus>
				<text class="item-name">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>




<script>
	export default {
		props: {
			title: String,
			items: Array
		},
		methods: {
			handleClick(index) {
				const item = this.items[index]
				if (item.url) {
					this.$emit('item-click', item.url)
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.section-title {
		color: #ffffff;
		margin-bottom: 16rpx;
		font-size: 32rpx;
		margin-left: 15rpx;
	}

	.section-card {
		background: white;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 105, 255, 0.08);
		margin-bottom: 25rpx;
		overflow: hidden;
		transition: all 0.3s ease;
		border: 1rpx solid #e0e7ff;
	}

	.section-card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 35rpx rgba(0, 105, 255, 0.15);
	}

	.section-header {
		background: linear-gradient(90deg, #1a73e8, #4285f4);
		color: white;
		padding: 16rpx 20rpx;
		font-size: 18rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
	}

	.icon {
		margin-right: 12rpx;
		font-size: 20rpx;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150rpx, 1fr));
		gap: 20rpx;
		padding: 20rpx;
	}

	.grid-item {
		background: #f8fbff;
		border-radius: 12rpx;
		padding: 20rpx 10rpx;
		text-align: center;
		transition: all 0.3s;
		cursor: pointer;
		border: 1rpx solid #e1f0ff;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grid-item:hover {
		background: linear-gradient(135deg, #e3f2fd, #bbdefb);
		transform: translateY(-3rpx);
		box-shadow: 0 6rpx 15rpx rgba(66, 133, 244, 0.2);
	}

	.item-icon {
		margin-bottom: 15rpx;
		transition: all 0.3s;
	}

	.item-name {
		font-size: 24rpx;
		color: #3c4043;
		font-weight: 500;
		text-align: center;
	}

	.badge {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		background: #f44336;
		color: white;
		border-radius: 10rpx;
		padding: 2rpx 6rpx;
		font-size: 10rpx;
		font-weight: bold;
	}
</style>